<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width , initial-scale=1 , shrink-to-fit=no"/>
    <link rel="stylesheet" type="text/css" href="bootstrap4/dist/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css"/>
    <link href="css/flaticon.css" rel="stylesheet" type="text/css" />
    <link href="css/services.css" rel="stylesheet" type="text/css">
    <link href="owl.carousel/owl.carousel.css" rel="stylesheet">
    <link href="owl.carousel/owl.theme.css" rel="stylesheet">
    <title>services</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 col-md-8 text-left text-center ">
            <i class="fa fa-user"></i>　
            <a href="#">Login</a>　
            <i class="fa fa-pencil"></i>　
            <a href="#">Register</a>　
            <i class="fa fa-cart-plus"></i>　
            <a href="#">Checkout</a>　
        </div>
        <div class="col-12 col-md-4 text-right text-center">
            <i class="fa fa-heart"></i>　
            <a href="#">Wishlist</a>　
            <i class="fa fa-angle-down"></i>　
            <a href="#">USD</a>　
        </div>
    </div>
</div>
<!--第二部分-->
<div class="tu m-0 p-0">
    <div class="jumbotron jumbotron-fluid text-white d-flex align-items-center m-0 p-0">
        <div class="container">
            <div class="container kuai">
                <div class="row">
                    <div class="col-12 col-md-auto text-center">
                        <img src="images/logo.png">
                    </div>
                    <div class="col-12  col-md-4 ml-auto  form-group ">
                        <input class="form-control" type="text" placeholder="search... ">
                        <button class="btn an_niu">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--第三部分-->
<nav class="navbar navbar-expand-lg navbar-light pt-0 pb-0">
    <a class="navbar-brand " href="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-lg-center" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item ml-lg-auto">
                <a class="nav-link p-3" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="services.html">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">Gallery</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">Bolg</a>
            </li>
            <li class="nav-item">
                <a class="nav-link p-3" href="#">Shop</a>
            </li>
            <li class="nav-item mr-lg-auto">
                <a class="nav-link p-3" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>
<!--第四部分-->
<div class="container-fluid">
    <div class="container-fluid baijing text-center col-12">
        <div class="bai_jing_tu">
            <h1>Servicess</h1>
            <p>________________________________</p>
            <p>————————</p>
            <h5>Home<span class="yang_se_go_yon"> / Servicess</span></h5>
        </div>
    </div>
    <div class="hm_service_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="hm_service_box">
                        <div class="service_icon">
                            <i class="flaticon flaticon-quality"></i>
                        </div>
                        <h2>Quality Work</h2>
                        <p> Omnicos directe desirabilite nov lits es lingua On refus continuar payar custos traductores solmen pronunciation.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="hm_service_box">
                        <div class="service_icon">
                            <i class="flaticon flaticon-delivery-truck-with-packages-behind"></i>
                        </div>
                        <h2>Free Delivery</h2>
                        <p> Omnicos directe desirabilite nov lits es lingua On refus continuar payar custos traductores solmen pronunciation.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="hm_service_box">
                        <div class="service_icon">
                            <i class="flaticon flaticon-24-hours-delivery"></i>
                        </div>
                        <h2>24 Hour Support</h2>
                        <p> Omnicos directe desirabilite nov lits es lingua On refus continuar payar custos traductores solmen pronunciation.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="hm_service_box">
                        <div class="service_icon">
                            <i class="flaticon flaticon-money-bag-with-dollar-symbol"></i>
                        </div>
                        <h2>100% Money Back</h2>
                        <p> Omnicos directe desirabilite nov lits es lingua On refus continuar payar custos traductores solmen pronunciation.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="hm_service_box">
                        <div class="service_icon">
                            <i class="flaticon flaticon-giftbox"></i>
                        </div>
                        <h2>Packaging</h2>
                        <p> Omnicos directe desirabilite nov lits es lingua On refus continuar payar custos traductores solmen pronunciation.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="hm_service_box">
                        <div class="service_icon">
                            <i class="flaticon flaticon-delivery-truck-with-circular-clock"></i>
                        </div>
                        <h2>Fast Delivery</h2>
                        <p> Omnicos directe desirabilite nov lits es lingua On refus continuar payar custos traductores solmen pronunciation.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<p class="text-light">sdf</p>
<!-- 第五部分-->
<div class="baijing3">
    <div class="row">
        <div class="col-12 col-md-4">
        </div>
        <div class="col-12 col-md-8">
            <div class="px-5 py-2 mr-0">
                <div id = "accordion">
                    <h4 class="mt-4"><span class="zi2"> Why</span> Choose Us</h4>
                    <div class="card mt-4">
                        <div class="card-header shou_feng">
                            <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapseOne"> Respecting Your Time<span>
                                  </span></p>
                        </div>
                        <div id="collapseOne" class="collapse show" data-parent="#accordion">
                            <div class="card-body shou_feng_yeng">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                elit, sed do eiusmod tempor incididunt ut labore et dolore
                            </div>
                        </div>
                    </div>
                    <div class="card mt-4">
                        <div class="card-header shou_feng">
                            <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapse2">Latest In Technology<span></span></p>
                        </div>
                        <div id="collapse2" class="collapse" data-parent="#accordion">
                            <div class="card-body shou_feng_yeng">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                elit, sed do eiusmod tempor incididunt ut labore et dolore
                            </div>
                        </div>
                    </div>
                    <div class="card mt-4">
                        <div class="card-header shou_feng">
                            <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapse3">Professional Staff<span></span></p>
                        </div>
                        <div id="collapse3" class="collapse" data-parent="#accordion">
                            <div class="card-body shou_feng_yeng">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                elit, sed do eiusmod tempor incididunt ut labore et dolore
                            </div>
                        </div>
                    </div>
                    <div class="card mt-4">
                        <div class="card-header shou_feng">
                            <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapse4"> Free Home Dilevery<span></span>
                            </p>
                        </div>
                        <div id="collapse4" class="collapse" data-parent="#accordion">
                            <div class="card-body shou_feng_yeng">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                elit, sed do eiusmod tempor incididunt ut labore et dolore
                            </div>
                        </div>
                    </div>
                    <div class="card mt-4">
                        <div class="card-header shou_feng">
                            <p class="card-link you_fu m-0" data-toggle="collapse" href="#collapse5">High Quality<span> </span>
                            </p>
                        </div>
                        <div id="collapse5" class="collapse " data-parent="#accordion">
                            <div class="card-body shou_feng_yeng">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing
                                elit, sed do eiusmod tempor incididunt ut labore et dolore
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 第七部分-->
<div class="container-fluid feng_se col-12 ">
    <h3 class="py-5 text-center text-white">Our Clients</h3>
    <div class="container">
        <div id="owl-demo" class="owl-carousel py-3">
            <a class="item"><img src="images/partner1.png" alt=""/></a>
            <a class="item"><img src="images/partner2.png" alt=""></a>
            <a class="item"><img src="images/partner3.png" alt=""></a>
            <a class="item"><img src="images/partner4.png" alt=""></a>
            <a class="item"><img src="images/partner5.png" alt=""></a>
            <a class="item"><img src="images/partner1.png" alt=""></a>
            <a class="item"><img src="images/partner2.png" alt=""></a>
            <a class="item"><img src="images/partner3.png" alt=""></a>
            <a class="item"><img src="images/partner4.png" alt=""></a>
            <a class="item"><img src="images/partner5.png" alt=""></a>
            <a class="item"><img src="images/partner1.png" alt=""></a>
            <a class="item"><img src="images/partner2.png" alt=""></a>
            <a class="item"><img src="images/partner3.png" alt=""></a>
            <a class="item"><img src="images/partner4.png" alt=""></a>
            <a class="item"><img src="images/partner5.png" alt=""></a>
        </div>
    </div>
</div>
<!-- 第八部分-->
<div class="da_div2 yang_se5">
    <div class="container">
        <div class="row py-5">
            <div class="col-12 col-md-6 col-lg-3">
                <img src="images/logo.png">
                <p class="zi6">It is a long established fact that a reader will be distracted by the readable
                    content of a page when looking at its layout.</p>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <h5 class="zi2">Help</h5>
                <p class="zi6">Find Your Beer</p>
                <p class="zi6">Customer Service</p>
                <p class="zi6">Contact</p>
                <p class="zi6">Recent Orders</p>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <h5 class="zi2">Links</h5>
                <p class="zi6">Home</p>
                <p class="zi6">Shop</p>
                <p class="zi6">404 Page</p>
                <p class="zi6">Login</p>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <h5 class="zi2">Our Information</h5>
                <p class="zi6">787 Lakeview St. Marion, NC 28752 </p>
                <p class="zi6">+1800123654789 </p>
                <p class="zi6">+1800123456788 </p>
                <p class="zi6">Support@Handmade.Net</p>
            </div>
        </div>
    </div>
</div>
<!-- 第九部分-->
<div class="zui_ho feng2">
    <div class="row">
        <div class="col-12 col-md-6 text-center ">
            <p class="zi6">Copyrights © 2018 All Rights <span class="text-primary">Reserved</span> by Himanshusofttech</p>
        </div>
        <div class="col-12 col-md-6 text-right zui2 text-center zi6">
            <a href="#" class="zi6"><i class="fa fa-facebook"></i></a>
            <a href="#" class="zi6"><i class="fa fa-twitter mr-2"></i></a>
            <a href="#" class="zi6"><i class="fa fa-google-plus mr-2"></i></a>
            <a href="#" class="zi6"><i class="fa fa-pinterest-p mr-2"></i></a>
            <a href="#" class="zi6"><i class="fa fa-linkedin mr-2"></i></a>
        </div>
    </div>
</div>
</body>
<script src="JS/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap4/dist/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap4/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="JS/jquery-3.2.1.js"></script>
<script src="owl.carousel/owl.carousel.js"></script>

<script type="text/javascript">
    $(function(){
        $('#owl-demo').owlCarousel({
            item:2,
            autoPlay:1000,
            navigation:false,
            pagination: false,
            itemsDesktop:false,
            itemsDesktopSmall: false,
            itemsTablet: [580,1],
            itemsTabletSmall: false,
            itemsMobile: false
        })
    });

    window.onscroll = function (event) {
        var shang = document.documentElement.scrollTop
        var oDiv = document.getElementsByClassName("navbar-nav")[0];

        if (shang > 300){
            oDiv.style.position = "fixed";
            oDiv.style.top = "0px"
        }
        else{
            oDiv.style.position = "relative";
            oDiv.style.top = "";
        }
    }
</script>
</html>